<template>
  <div class="cate-classify combground">
    <div class="container">
      <div class="local">
        <img src="~/assets/images/local.png" alt="" />
        <span>
          当前位置 : 配套服务
          <img src="@/assets/images/home/icon.png" alt="" />
          {{ name }}{{ name2 ? ">" + name2 : "" }}
        </span>
      </div>
      <div class="comtitle">
        <h2 class="comh2">{{ name2 ? name2 : name }}</h2>
      </div>

      <div class="content">
        <div class="menu-wrap">
          <Menu
            @select="cateSelect"
            text-color="#666"
            active-text-color="#E48B2C"
            style="margin-bottom: 30px;"
            :default-openeds="['1']"
          >
            <Submenu index="1">
              <template slot="title">{{ name }}</template>
              <div style="max-height: 300px; overflow-y: auto;">
                <menu-item-group>
                  <menu-item
                    v-for="(item, index) in secondary"
                    :key="index"
                    :index="item.id.toString()"
                    >{{ item.cate_name }}</menu-item
                  >
                </menu-item-group>
              </div>
            </Submenu>
          </Menu>

          <Menu
            text-color="#666"
            active-text-color="#E48B2C"
            style="margin-bottom: 30px;"
            :default-openeds="['1']"
          >
            <Submenu index="1">
              <template slot="title">应用领域</template>
              <div class="checkbox">
                <checkbox-group v-model="chosenFields">
                  <m-checkbox
                    v-for="(item, index) in field"
                    :key="index"
                    :label="item.name"
                    style="margin-bottom: 15px; width: 100px;"
                  />
                </checkbox-group>
              </div>
            </Submenu>
          </Menu>

          <Menu
            text-color="#666"
            active-text-color="#E48B2C"
            style="margin-bottom: 30px;"
          >
            <Submenu
              v-for="(item, index) in specifi"
              :key="index"
              :index="index + ''"
            >
              <template slot="title">{{ item.name }}</template>
              <div class="checkbox">
                <checkbox-group v-model="chosenSpecifi[index]">
                  <m-checkbox
                    v-for="(i, v) in item.options"
                    :key="v"
                    :label="i.id"
                    style="margin-bottom: 15px; width: 100px;"
                    >{{ i.name }}</m-checkbox>
                </checkbox-group>
              </div>
            </Submenu>
          </Menu>

          <Menu
            text-color="#666"
            active-text-color="#E48B2C"
            :default-openeds="['1']"
            style="margin-bottom: 30px;"
          >
            <Submenu index="1">
              <template slot="title">起订量</template>
              <div
                style="display: inline-flex; align-items: center; padding: 20px 30px;"
              >
                <m-input
                  v-model="moq"
                  style="width: 199px; margin-right: 15px;"
                />
                <span style="color: #666;">Pcs</span>
              </div>
            </Submenu>
          </Menu>

          <Menu
            text-color="#666"
            active-text-color="#E48B2C"
            :default-openeds="['1']"
            style="margin-bottom: 30px;"
          >
            <Submenu index="1">
              <template slot="title">价格区间</template>
              <div class="price-range">
                <div class="price-range__btns">
                  <m-input v-model="price.min" style="width: 83px;" />
                  —
                  <m-input v-model="price.max" style="width: 83px;" />
                </div>
                <span style="color: #666;">元</span>
              </div>
            </Submenu>
          </Menu>

          <Menu
            text-color="#666"
            active-text-color="#E48B2C"
            style="margin-bottom: 30px;"
            :default-openeds="['1']"
          >
            <Submenu index="1">
              <template slot="title">产品状态</template>
              <div class="checkbox">
                <checkbox-group v-model="chosenStatus">
                  <m-checkbox
                    v-for="(item, index) in status"
                    :key="index"
                    :label="item.name"
                    style="margin-bottom: 15px; width: 100px;"
                  />
                </checkbox-group>
              </div>
            </Submenu>
          </Menu>

          <Menu
            text-color="#666"
            active-text-color="#E48B2C"
            :default-openeds="['1']"
          >
            <Submenu index="1">
              <template slot="title">资质认证</template>
              <div
              class="immp-qualify"
                v-for="(key, index) in Object.keys(qualify)"
                :key="index"
              >
                <div class="immp-qualify__box">
                  <div class="immp-name">
                    {{ qualify[key].name }}
                  </div>
                  <checkbox-group v-model="qualify[key].chosen">
                    <m-checkbox
                      style="margin-bottom: 15px; width: 100px;"
                      v-for="(item, index2) in qualify[key].options"
                      :key="index2"
                      :label="item.value"
                      >{{ item.name }}</m-checkbox
                    >
                  </checkbox-group>
                </div>
              </div>
            </Submenu>
          </Menu>

          <div class="menu-btns">
            <m-button width="145" type="bordered" @click="reset">重置</m-button>
            <m-button width="145" @click="confirm">确定</m-button>
          </div>
        </div>

        <div class="content-content">
          <div class="recommend-company">
            <div class="title">
              推荐企业
              <span class="btns">
                <span class="swiper-button-prev btn">
                  <img src="~/assets/images/newleft.png" alt="" />
                </span>
                <span class="swiper-button-next btn">
                  <img src="~/assets/images/newright.png" alt="" />
                </span>
              </span>
            </div>

            <swiper class="swiper" :options="panelSwiper1">
              <swiper-slide
                v-for="(item, index) in MerchantTuiList"
                :key="index"
              >
                <div class="itemBox" @click="toCompanyHome(item.mer_id)">
                  <div class="picBox">
                    <img
                      :src="item.mer_avatar"
                      :alt="item.mer_name"
                      class="objectCover"
                    />
                  </div>
                  <p class="name">{{ item.mer_name }}</p>
                </div>
              </swiper-slide>
            </swiper>
          </div>

          <div class="products">
            <div class="f16 cor666 mbt20">产品列表</div>
            <div class="list">
              <product-item
                v-for="(item, index) in proList"
                :key="index"
                :name="item.store_name || '--'"
                :price="item.price"
                :storage="item.moq"
                :image="item.image"
                class="item"
                @click.native="toCateProduct(item.product_id)"
              />
              <nodata
                message="该分类下暂时没有产品"
                :status="proStatus"
              ></nodata>
            </div>
            <m-pagination
              :pagination="prototal"
              :page-size="proLimit"
              @changePage="changeThisPage"
            />
          </div>
        </div>
      </div>

      <!-- 推荐产品 -->
      <div class="recommend-products">
        <div class="title">
          推荐产品
          <span class="btns">
            <span class="swiper-button-prev1 btn">
              <img src="~/assets/images/newleft.png" alt="" />
            </span>
            <span class="swiper-button-next1 btn">
              <img src="~/assets/images/newright.png" alt="" />
            </span>
          </span>
        </div>
        <swiper class="swiper" :options="panelSwiper">
          <swiper-slide
            class="item"
            v-for="(item, index) in tuijianList"
            :key="index"
          >
            <product-item
              :name="item.store_name"
              :storage="item.moq"
              :price="item.price"
              :image="item.image"
              :productId="item.product_id"
              :type="item.is_entity"
              :isCollect="item.is_hide_product"
              @click.native="toCateProduct(item.product_id)"
            />
          </swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import {
  CheckboxGroup,
  Menu,
  MenuItem,
  MenuItemGroup,
  Submenu
} from "element-ui";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import MCheckbox from "@/components/common/m-checkbox/MCheckbox";
import MInput from "@/components/common/m-input/MInput";
import MButton from "@/components/common/m-button/MButton";
import MPagination from "@/components/common/m-pagination/MPagination";
import ProductItem from "@/components/common/ProductItem";
import {
  getProductsCategory,
  getProductsList,
  getRecommendSerList
} from "@/request/api";
import "swiper/dist/css/swiper.css";

export default {
  name: "CateClassify",
  components: {
    ProductItem,
    MPagination,
    MButton,
    MInput,
    MCheckbox,
    swiper,
    swiperSlide,
    Menu,
    MenuItemGroup,
    Submenu,
    MenuItem,
    CheckboxGroup
  },
  data() {
    return {
      id: '',
      id2: '',
      name: '',
      name2: '',
      secondary: [],
      proPage: 1,
      proList: [],
      proStatus: 1,
      prototal: 1,
      prototal: 1,
      proLimit: 8,
      panelSwiper1: {
        slidesPerView: 4,
        slidesPerColumn: 2,
        slidesPerGroup: 8,
        spaceBetween: 10,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
          disabledClass: "my-button-disabled",
          hiddenClass: "my-button-hidden"
        },
        observer: true
      },
      //推荐产品
      panelSwiper: {
        slidesPerView: 5,
        slidesPerGroup: 5,
        spaceBetween: 16,
        observer: true,
        navigation: {
          nextEl: ".swiper-button-next1",
          prevEl: ".swiper-button-prev1",
          disabledClass: "my-button-disabled",
          hiddenClass: "my-button-hidden"
        }
      },
      tuijianList: [],
      MerchantTuiList: [],
      // 应用领域
      field: [
        {
          name: "面部护理"
        },
        {
          name: "身体护理"
        },
        {
          name: "头发头皮"
        },
        {
          name: "造型设计"
        }
      ],
      chosenFields: [],
      // 产品规格
      specifi: [
        {
          name: "螺纹类型",
          options: [
            {
              name: "产品规格一1",
              id: "1-1"
            },
            {
              name: "产品规格一2",
              id: "1-2"
            },
            {
              name: "产品规格一3",
              id: "1-3"
            }
          ]
        },
        {
          name: "材质",
          options: [
            {
              name: "产品规格二1",
              id: "2-1"
            },
            {
              name: "产品规格二2",
              id: "2-2"
            }
          ]
        },
        {
          name: "形状",
          options: [
            {
              name: "产品规格三1",
              id: "3-1"
            },
            {
              name: "产品规格三2",
              id: "3-2"
            },
            {
              name: "产品规格三3",
              id: "3-3"
            },
            {
              name: "产品规格三4",
              id: "3-4"
            },
            {
              name: "产品规格三5",
              id: "3-5"
            }
          ]
        },
        {
          name: "产品规格四",
          options: [
            {
              name: "产品规格四1",
              id: "4-1"
            },
            {
              name: "产品规格四2",
              id: "4-2"
            },
            {
              name: "产品规格四3",
              id: "4-3"
            },
            {
              name: "产品规格四4",
              id: "4-4"
            }
          ]
        }
      ],
      chosenSpecifi: [[], [], [], []],
      // 价格区间
      price: {
        min: "",
        max: ""
      },
      // 起订量
      moq: "",
      // 产品状态
      status: [
        {
          name: "免费样品"
        },
        {
          name: "库存现货"
        },
        {
          name: "支持PCR"
        },
        {
          name: "支持定制"
        }
      ],
      chosenStatus: [],
      // 资质认证
      qualify: {
        certify: {
          name: "PackMate认证",
          options: [
            {
              name: "PackMate认证",
              value: 1
            }
          ],
          chosen: []
        },
        quality: {
          name: "质量管理体系",
          options: [
            {
              name: "IOS9001",
              value: "is_ios9001"
            },
            {
              name: "ISO22716",
              value: "is_iso22716"
            },
            {
              name: "GMP",
              value: "is_gmp"
            },
            {
              name: "BRC",
              value: "is_brc"
            },
            {
              name: "其他",
              value: "is_quality"
            }
          ],
          chosen: []
        },
        environment: {
          name: "环境管理认证",
          options: [
            {
              name: "ISO14001",
              value: "is_iso14001"
            },
            {
              name: "其他",
              value: "is_ambient"
            }
          ],
          chosen: []
        },
        society: {
          name: "社会责任体系",
          options: [
            {
              name: "SA8000",
              value: "is_sa8000"
            },
            {
              name: "ISO26000",
              value: "is_iso26000"
            },
            {
              name: "BSCI",
              value: "is_bsci"
            },
            {
              name: "SMETA",
              value: "is_smeta"
            },
            {
              name: "其他",
              value: "is_society"
            }
          ],
          chosen: []
        },
        security: {
          name: "职业健康与安全",
          options: [
            {
              name: "ISO45001",
              value: "is_iso45001"
            },
            {
              name: "OHSAS18001",
              value: "is_ohsas18001"
            },
            {
              name: "其他",
              value: "is_safe"
            }
          ],
          chosen: []
        },
        product: {
          name: "产品认证",
          options: [
            {
              name: "FSC",
              value: "is_fsc"
            },
            {
              name: "GRS",
              value: "is_grs"
            },
            {
              name: "Ocean Cycle",
              value: "is_ocean_cycle"
            },
            {
              name: "其他",
              value: "is_produce"
            }
          ],
          chosen: []
        }
      }
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.name = this.$route.query.name;
    this.getCateList();
    this.getProducts();
    this.getProducts("tui");
    this.getMerchatTui();
  },
  methods: {
    getMerchatTui() {
      getRecommendSerList().then(res => {
        this.MerchantTuiList = res.data;
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    selectSpecifi(index, v) {
      let chosen = this.specifi[index].options[v].chosen;
      this.specifi[index].options[v].chosen = !chosen;
    },
    reset() {
      (this.chosenFields = []),
        (this.chosenSpecifi = [
          {
            chosen: []
          },
          {
            chosen: []
          },
          {
            chosen: []
          },
          {
            chosen: []
          }
        ]),
        (this.moq = ""),
        (this.price.min = this.price.max = "");
      this.chosenStatus = [];
      Object.assign(this.$data.qualify, this.$options.data().qualify);
      this.getProducts();
    },
    confirm() {
      this.getProducts();
    },
    cateSelect(id, idArr) {
      for (var i in this.secondary) {
        if (this.secondary[i].id == id) {
          this.name2 = this.secondary[i].cate_name;
        }
      }
      this.proPage = 1;
      this.id2 = id;
      this.getProducts();
    },
    getCateList() {
      let data = {
        is_entity: "0",
        page: 1,
        limit: 0,
        pid: this.id,
        num: 0
      };
      getProductsCategory(data)
        .then(res => {
          this.secondary = res.data.data;
        })
        .catch(err => {
          this.$message.error(err.message);
        });
    },
    getProducts(type) {
      this.proStatus = 1;
      this.list = [];
      var field_list = "";
      this.field.forEach(item => {
        if (this.chosenFields.includes(item.name)) {
          field_list += "1";
        } else {
          field_list += "0";
        }
      });
      var pro_ste = "";
      this.status.forEach(item => {
        if (this.chosenStatus.includes(item.name)) {
          pro_ste += "1";
        } else {
          pro_ste += "0";
        }
      });
      var auth = [];
      auth = auth.concat(
        auth,
        this.qualify.quality.chosen,
        this.qualify.environment.chosen,
        this.qualify.society.chosen,
        this.qualify.security.chosen,
        this.qualify.product.chosen
      );
      auth = this.$common.arrToString(auth);
      var data = {};
      if (type == "tui") {
        data = {
          is_entity: "0",
          is_tui: 1,
          limit: 10
        };
      } else {
        data = {
          is_entity: "0",
          page: this.proPage,
          limit: this.proLimit,
          field_list: field_list == "0000" ? "" : field_list,
          moq: this.moq,
          price_min: this.price.min,
          price_max: this.price.max,
          pro_ste: pro_ste == "0000" ? "" : pro_ste,
          is_packmate: this.qualify.certify.chosen[0] || "",
          auth: auth
        };
      }
      if (this.id2) {
        data.pid = this.id;
        data.cate_id = this.id2;
      } else {
        data.pid = 0;
        data.cate_id = this.id;
      }
      getProductsList(data).then(res => {
        if (type == "tui") {
          this.tuijianList = res.data.data;
        } else {
          this.proList = res.data.data;
          this.prototal = res.data.total;
          if (res.data.total == 0) {
            this.proStatus = 0;
          } else {
            this.proStatus = 2;
          }
          window.scrollTo({
            top: 0
          });
        }
      });
    },
    changeThisPage(page) {
      this.proPage = page;
      this.getProducts();
    },
    toCompanyHome(id) {
      this.$router.push({
        name: "CompanyHome",
        params: { id }
      });
    },
    toCateProduct(id) {
      this.$router.push({
        name: "ServiceProduct",
        params: { id }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.local {
  color: #656565;
  margin-bottom: 67px;
  position: relative;
  top: 40px;
  left: 50px;
}

.local img {
  margin-right: 10px;
}
.price-range {
  display: inline-flex; 
  align-items: center; 
  padding: 20px 30px;
  &__btns {
    width: 209px; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
    margin-right: 15px;
  }
}
.immp-qualify {
  padding: 15px 15px 0px;
  &__box {
    border-bottom: solid 1px #eaeaea;
  }
  .immp-name {
    font-size: 14px; 
    color: #666; 
    margin-bottom: 15px;
  }
}

.cate-classify {
  padding: 0px 0 80px 0;

  /deep/ .el-submenu__title {
    height: 45px;
    line-height: 45px;
    background-color: $theme-color-1;
    color: #fff !important;
    border-bottom: 1px solid #fff;
  }

  /deep/ .el-submenu__icon-arrow {
    color: #fff;
  }

  .content {
    width: 1200px;
    padding: 0 50px 65px;
    margin-top: 50px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    position: relative;

    .menu-wrap {
      height: 100%;
      width: 305px;
      position: relative;

      .checkbox {
        padding: 15px;
        padding-bottom: 0;
      }

      .menu-btns {
        position: absolute;
        bottom: -70px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .content-content {
      width: calc(97% - 305px);
      font-size: 15px;
      color: #666;

      .recommend-company {
        padding: 15px;
        background-color: #fff;
        margin-bottom: 30px;

        .title {
          font-size: 20px;
          padding-left: 15px;
          position: relative;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;

          .btns {
            display: flex;
            position: relative;
            right: 4px;

            .btn {
              position: static;
              width: 34px;
              height: 34px;
              line-height: 34px;
              text-align: center;
              cursor: pointer;
              margin-top: 0;
              outline: none;

              &:first-of-type {
                margin-right: 0px;
              }
            }

            .swiper-button-prev {
              background-image: none;
            }

            .swiper-button-next {
              background-image: none;
            }
          }
        }

        .title:before {
          content: "";
          position: absolute;
          left: 0;
          top: 22%;
          bottom: auto;
          right: auto;
          height: 60%;
          width: 4px;
          background-color: #4d4d4d;
          border-radius: 5px;
        }

        .list {
          margin: -10px;

          .item {
            display: inline-block;
            border: solid 1px #eaeaea;
            padding: 10px;
            margin: 10px;
            cursor: pointer;

            .pic {
              width: 100%;
              height: 150px !important;
            }
          }
        }
      }

      .products {
        .title {
          margin-bottom: 15px;
        }

        .list {
          margin: -10px;
          margin-bottom: 15px;

          .item {
            width: calc((100% - 80px) / 4);
            margin: 10px;
          }
        }
      }
    }
  }

  .swiper-slide {
    margin: 0;
  }

  .itemBox {
    width: 100%;
    border: solid 1px #eaeaea;
    padding: 10px;
    cursor: pointer;

    .picBox {
      width: 100%;
      height: 100px;
    }
    .name {
      @include text-omitted(1);
    }
  }

  .recommend-products {
    margin-top: 20px;
    padding: 0 50px;
    font-size: 16px;

    .title {
      padding-left: 15px;
      font-size: 20px;
      margin-bottom: 15px;
    }

    .list {
      margin: -10px;
      position: relative;

      .prev,
      .next {
        width: 24px;
        height: 42px;
        line-height: 43px;
        text-align: center;
        background-color: $theme-color-1;
        color: #fff;
        position: absolute;
        cursor: pointer;

        &.prev {
          left: 0;
          top: calc(50% - 21px);
        }

        &.next {
          right: 0;
          top: calc(50% - 21px);
        }
      }
    }
  }
}

.recommend-products {
  position: relative;

  .prev,
  .next {
    width: 24px;
    height: 42px;
    line-height: 43px;
    text-align: center;
    background-color: $theme-color-1;
    color: #fff;
    position: absolute;
    cursor: pointer;
    outline: none;

    &.prev {
      left: 30px;
      top: calc(55% - 21px);
      z-index: 10;
    }

    &.next {
      right: 30px;
      top: calc(55% - 21px);
      z-index: 10;
    }
  }

  .title {
    position: relative;
  }

  .title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: auto;
    right: auto;
    height: 60%;
    width: 4px;
    background-color: #4d4d4d;
    border-radius: 5px;
  }

  .btns {
    display: inline-block;
    position: absolute;
    right: 4px;

    .btn {
      position: static;
      width: 34px;
      height: 34px;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      margin-top: 0;
      outline: none;

      &:first-of-type {
        margin-right: 15px;
      }
    }

    .swiper-button-prev1 {
      background-image: none;
    }

    .swiper-button-next1 {
      background-image: none;
    }
  }
}

.el-menu-item {
  height: 40px;
  line-height: 40px;
  position: relative;
}

.el-menu-item:after {
  content: " ";
  position: absolute;
  left: 25px;
  top: 16px;
  width: 6px;
  height: 6px;
  background-color: #4f4f4f;
  border-radius: 4px;
}

.el-menu-item:hover {
  color: #e48b2c !important;
}

/deep/ .el-menu-item:hover::after {
  background-color: #e48b2c !important;
}
</style>
